<template>
  <div
    class="bg-white rounded-lg shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer overflow-hidden group"
    @click="$emit('click')"
  >
    <!-- 封面图 -->
    <div class="relative h-48 bg-gradient-to-br from-orange-100 to-red-100 flex items-center justify-center">
      <div v-if="novel.cover_url" class="w-full h-full">
        <img :src="novel.cover_url" :alt="novel.title" class="w-full h-full object-cover" />
      </div>
      <div v-else class="text-4xl">📖</div>
      
      <!-- 推荐标识 -->
      <div v-if="novel.is_featured" class="absolute top-2 right-2">
        <span class="bg-orange-500 text-white text-xs px-2 py-1 rounded">⭐ 推荐</span>
      </div>
    </div>
    
    <!-- 内容信息 -->
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-800 mb-2 line-clamp-2 group-hover:text-orange-500 transition-colors">
        {{ novel.title }}
      </h3>
      
      <div class="text-sm text-gray-600 mb-3">
        <span class="font-medium">{{ novel.author }}</span>
        <span class="mx-2">|</span>
        <span>{{ novel.category_name }}</span>
      </div>
      
      <div class="flex flex-wrap gap-2 mb-3">
        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">{{ novel.status }}</span>
        <span class="text-xs bg-orange-50 text-orange-600 px-2 py-1 rounded">{{ formatWordCount(novel.word_count) }}</span>
      </div>
      
      <!-- 统计信息 -->
      <div class="flex items-center justify-between text-xs text-gray-500">
        <div class="flex items-center gap-3">
          <span>👁️ {{ formatNumber(novel.view_count) }}</span>
          <span>⭐ {{ novel.rating }}</span>
        </div>
        <span>{{ novel.chapter_count }} 章</span>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  novel: {
    type: Object,
    required: true
  }
})

defineEmits(['click'])

// 格式化字数
const formatWordCount = (count) => {
  if (count < 1000) return `${count}字`
  if (count < 10000) return `${(count / 1000).toFixed(1)}万字`
  return `${(count / 10000).toFixed(1)}万字`
}

// 格式化数字
const formatNumber = (num) => {
  if (num < 1000) return num
  if (num < 10000) return `${(num / 1000).toFixed(1)}k`
  return `${(num / 10000).toFixed(1)}w`
}
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

